<template>
	<div class="orders-project">
		<div class="table-container">
			<el-table
				ref="table"
				stripe
				:data="orders"
				@row-click="order=$event"
			>
				<el-table-column	label="订单ID">
					<template
						slot="header"
						slot-scope="scope"
					>
						<el-input
							:data="scope"
							class="search-input"
							size="mini"
							placeholder="订单ID"
							clearable
							v-model.number="filterOrderId"
							@change="loadOrders(1)"
						/>
					</template>
					<template slot-scope="scope">
						{{scope.row.contribPointOrder.id}}
					</template>
				</el-table-column>
				<el-table-column
					label="时间"
					width="105px"
					prop="purchaseTime"
					align="center"
				/>
				<el-table-column
					label="相关用户"
					align="center"
				>
					<template
						slot="header"
						slot-scope="scope"
					>
						<el-input
							:data="scope"
							class="search-input"
							size="mini"
							placeholder="用户ID"
							clearable
							v-model.number="filterUserId"
							@change="loadOrders(1)"
						/>
					</template>
					<template slot-scope="scope">
						{{scope.row.contribPointOrder.user.userId}} - {{scope.row.contribPointOrder.user.nickname}}
					</template>
				</el-table-column>
				<el-table-column
					label="类型"
					align="center"
				>
					<template slot-scope="scope">
						<div>附件购买</div>
						<div><strong>{{scope.row.contribPointOrder.project.name}}</strong></div>
					</template>
				</el-table-column>
				<el-table-column
					label="商品说明"
					align="center"
				>
					<template slot-scope="scope">
						<ul>
							<li
								v-for="(file,index) in scope.row.contribPointOrder.orderResources"
								:key="index"
							>
								{{file.resource.name}}
							</li>
						</ul>
					</template>
				</el-table-column>
				<el-table-column
					label="花费Aha币"
					align="center"
					prop="contribPointOrder.chargedAhaCredit"
				/>
				<el-table-column
					label="状态"
					align="center"
				>
					<template slot-scope="scope">
						<div>{{scope.row.contribPointOrder.status === 0 ? "已取消" : "已支付"}}</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页器 -->
			<div class="pagination">
				<el-pagination
					background
					layout="prev, pager, next"
					:page-size="pageSize"
					:total="total"
					:current-page="pageNum"
					@current-change="loadOrders"
				/>
			</div>
		</div>
		<!-- 订单详细 -->
		<OrderDetail
			v-if="order"
			:order="order"
			@close="order=null"
		/>
	</div>
</template>

<script>
import { getProjectOrders } from '@user/api/order'

export default {
  name: 'orders-project',
  data() {
    return {
      pageNum: 1, // 当前页数
      pageSize: 10, // 每页显示多少条
      total: 0,
      filterOrderId: '', // 根据订单id筛选
      filterUserId: '', // 根据用户id筛选
      orders: [],
      order: null
    }
  },
  created() {
    this.loadOrders(1)
  },
  methods: {
    async loadOrders(pageNum = this.pageNum) {
      this.$loading()
      try {
        const { data: res } = await getProjectOrders({
          pageNum,
          pageSize: this.pageSize,
          orderId: this.filterOrderId || null,
          userId: this.filterUserId || null
        })

        console.log(res)
        const orders = res.pageData.filter(item => item.contribPointOrder)

        this.orders = orders.map(order => {
          order.purchaseTime = moment(order.purchaseTime).format('YYYY/MM/DD HH:mm:ss')
          order.contribPointOrder.createTime = moment(order.contribPointOrder.createTime).format('YYYY/MM/DD HH:mm:ss')
          order.contribPointOrder.payTime = moment(order.contribPointOrder.payTime).format('YYYY/MM/DD HH:mm:ss')
          return order
        })
        this.pageNum = pageNum
        this.total = res.total
        console.log(this.orders)
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    }
  }
}
</script>
